<template>
    <div style="position: fixed;width: 100%;height: 100%;overflow-y: scroll;">
        <div style="position: absolute;top: .6rem;left: .6rem;" @click="goBack">< 返回</div>
        <div style="text-align: center;padding: .6rem 0;">举报</div>
        <hr>
        <div class="house">
            <div class="m-input" style="align-items: flex-start;">
                <span class="label">举报内容：</span>
                <textarea class="input" style="height: 8rem;" cols="30" rows="10" v-model="content" placeholder="输入举报内容"></textarea>
            </div>
            <div class="m-input">
                <span class="label">图片：</span>
                <template v-for="(v,index) in imgList">
                    <img style="width: 80px;height: 80px;" :src="v" alt="">
                </template>
                <img src="../../../static/img/plus.png" alt="" @click="upFile">
            </div>

            <div style="margin: 3rem 0 1rem 0;text-align: center;">
                <el-button type="primary" style="width: 80%;padding: 1rem 0;" @click="sub">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import pub from '../../utils/pub'
    export default {
        name: "address-add",
        data(){
            return{
                content: '',
                imgList: []
            }
        },
        watch: {
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.2)'});
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {this.loading.close();},
            goBack(){
                this.$router.push('/mobile/report')
            },
            upFile(){
                let self = this;
                let el = document.createElement('input')
                el.type = 'file';el.accept="image/*"
                el.onchange = (e)=>{
                    self.loadopen()
                    pub.OssUpload(e.target.files[0], (res)=>{
                        self.loadclose()
                        self.imgList = [res];
                    })
                };
                el.click();
            },
            valid(){
                if(!this.content) return false;
                return true;
            },
            sub(){
                if(!this.valid()) return;
                let obj = {
                    'r.content': this.content,
                    'r.img_url': this.imgList.join(','),
                }
                this.loadopen();
                this.config.mpost('/api/report/report/publishReport', obj).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        this.$message({message: res.data.message,type: 'success'});
                        this.$router.push('/mobile/report')
                    } else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            }
        },
        mounted(){
        }
    }
</script>

<style scoped lang="less">
    .house .m-input{
        padding: .5rem;
    }
    .m-input{
        display: flex;
        align-items: center;
        .label{
            min-width: 20%;
            color: #777;
            font-size: .9rem;
            margin-right: 1rem;
        }
        .input{
            height: 2.2rem;
            width: 60%;
            border: none;
            border-bottom: 1px solid #ccc;
            color: #333;
            padding: 0 .5rem;
            outline: none;
        }
    }
</style>
